<script setup lang="ts">
import Event1 from "./Event1.vue";
import Event2 from "./Event2.vue";

const handler = (a: number, b: number, c: number, $event: MouseEvent) => {
  const ele = $event.target as HTMLPreElement;
  console.log(a, b, c, ele.innerText);
};

const hanlder2 = () => {
  alert("DOM事件click: aaa");
};

const handler3 = (...data: string[]) => {
  alert("自定义事件foo：" + data.join(", "));
};

const handler4 = (msg: string) => {
  alert("自定义事件click：" + msg);
};
</script>
<template>
  <div>
    <h1>事件</h1>
    <pre @click.prevent="handler(1, 2, 3, $event)">
        大江东去浪淘尽
        千古风流人物
    </pre>
    <hr />
    <Event1 @click="hanlder2" />
    <hr />
    <Event2 @foo="handler3" @click="handler4" />
  </div>
</template>
